<template>
    <view class="count" @click.stop="stopFunc" :class="size">

        <view class="box" v-if="numVal > 0">
            <!-- <text class="iconfont icon-jianshao" @click="countFunc(-1)"></text> -->

            <view class="btn-cont reduce">
                <text class="iconfont icon-jian2" ></text>
                <view class="btn-mask" @click="countFunc(-1)"></view>
            </view>
        
            <text class="nums">{{ numVal }}</text>

            
            <view class="btn-cont">
                <text class="iconfont icon-jiahao" ></text>
                <view class="btn-mask" @click="countFunc(1)"></view>
            </view>
              
        </view>
        <view v-else>
            <view class="btn-cont">
                <text class="iconfont icon-jiahao"></text>
                <view class="btn-mask" @click="countFunc(1)"></view>
            </view>
              
        </view>
          
    </view>
</template>

<script>

export default {
    props:{
        numVal:{
            type:[Number,String],
            default:0
        },
        size:String,
        parameter:[Number,String,Object,Array],
        limit:{
            type:[Number,String],
            default:0
        },
    },
    components: {},
    data () {
        return {
            num:0
        }
    },

    methods: {
        initData () {


        },
        countFunc( e  ) {

            let num = this.numVal + e

            if(num<this.limit){

                this.$emit('update:numVal', num - e)

                return
            }
           
            this.$emit('update:numVal', num )

            this.$emit('change', num ,this.parameter ,e)
            
		},
        stopFunc(){}
    }
}
</script>

<style scoped lang="scss">
.count{
    display: inline-block;
    text-align: right;
   
    .box{
        height: 40rpx;
        line-height: 40rpx;
    }
    .btn-cont{
        position: relative;
        height: 100%;
        width: 40rpx;
        text-align: center;
        color: #fff;
        border-radius: 6px;
        background: #fd1b1b;
        // background-color: rgb(255, 204, 77);
        font-size: 0;
        .iconfont{
            font-size: 26rpx;
            color: #fff;
            font-weight: 500;
        }
        &.reduce{
            background: #eaeaea;
        }
        .btn-mask{
            box-sizing: content-box;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            margin: -10rpx 0 0 -10rpx;
            padding: 10rpx;
            // background: red;
            line-height: 1;
          
        }
    }
    .box{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .nums{
            text-align: center;
            min-width: 60rpx;
            color: #000;
            font-size: 26rpx;
            height: 100%;
            margin: 0 4px;
            border-radius: 6px;
            background: transparent;
        }
    }
    &.big{
        .box{
            height: 60rpx;
            line-height: 60rpx;
        }
        .btn-cont{
            width: 60rpx;
        }

        .box{
            .nums{
                min-width: 100rpx;
                font-size: 34rpx;
                background: #f8f8f8;
            }
        }
    }
}
</style>
